<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/" >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>家政网</title>
    <meta name="keywords" content="家政网">
    <meta name="description" content="">
    <!-- 删除默认的苹果工具栏和菜单栏 -->
    <meta name =“apple-mobile-web-app-capable”content =“yes”/>  
    <!-- 苹果手机顶部为黑色 -->
    <meta name =“apple-mobile-web-status-bar-style”content =“block”/>  
    <link rel="icon" href="./images/icon.icon" type="images/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/user.css">

</head>
<body>
    <!-- logo -->
    <header>
        <div class="header-logo">
            <a href="">
                <span class="logo-icon"></span>
            </a>
        </div>
        <div class="header-search">
            <a href="">深圳 v</a>
            <input type="text" value="搜索">
        </div>
    </header>

    <!-- 用户中心导航 -->
    <div class="user-sidebar clear">
        <div class="fixed-submenu">
            <div class="sidebar">
                <div class="sub-menu">
                    <h4 class="show-submenu">个人中心</h4>
                    <ul class="sidebar-container">
                        <li><a href="">更改资料</a></li>
                        <li><a href="">账号保护</a></li>
                        <li><a href="">消息中心</a></li>
                    </ul>
                </div>

                <div class="sub-menu">
                    <h4 class="hide-submenu">订单中心</h4>
                    <ul class="sidebar-container">
                        <li><a href="">购买记录</a></li>
                        <li><a href="">未支付</a></li>
                        <li><a href="">未评价</a></li>
                    </ul>
                </div>
                <div class="sub-menu">
                    <h4 class="hide-submenu">服务商</h4>
                    <ul class="sidebar-container">
                        <li><a href="">待处理</a></li>
                        <li><a href="">账户中心</a></li>
                        <li><a href="">我的订单</a></li>
                    </ul>
                </div>
                <div class="sub-menu">
                    <h4 class="hide-submenu">最近活动</h4>
                    <ul class="sidebar-container">
                        <li><a href="">套餐活动</a></li>
                        <li><a href="">优惠活动</a></li>
                    </ul>
                </div>
                <div class="sub-menu">
                    <h4 class="hide-submenu">客服中心</h4>
                    <ul class="sidebar-container">
                        <li><a href="">投诉</a></li>
                        <li><a href="">客服</a></li>
                        <li><a href="">建议</a></li>
                    </ul>
                </div>
            </div>
            <div class="hide-menu">点<br/>击<br/>展<br/>开</div>
            <!-- <div class="hide-menu">点<br/>击<br/>隐<br/>藏</div> -->

        </div>
    </div>

    <!-- 用户信息 -->
    <div class="user-info">
        <div class="user-container">
            <div class="user-img clear">
                <div class="user-head"><img src="./images/header.jpg" alt=""></div>
                <div class="user-vip">
                    <div class="login-container">
                        <p>上次登录时间:</p>
                        <p class="login-time">2018年8月25日14:24:14</p>
                    </div>
                    <p><span>账户余额：￥4,551.51</span> <span class="user-onvip">开启VIP</span></p>
                </div>
            </div>

            <div class="user-related">
                <a href="">更改资料</a>
                <a href="">消息中心</a>
                <a href="">账号保护</a>
            </div>
        </div>
    </div>

    <!-- 订单中心 -->
    <div class="user-order clear">
        <div class="sub-title"><h3>订单中心</h3></div>
        <div class="user-order-container">
            <div class="order-status">
                <a href="">订单中心</a> 
                <a href="">待支付</a> 
                <a href="">待评价</a> 
                <a href="">售后服务</a> 
            </div>

            <ul class="orer-item">
                <li class="order-list">
                    <div class="order-list-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="order-name">
                        <p class="order-name-title more-row">家电安装、空调安装、抽油烟机安装套餐服务</p>
                        <p class="order-date">2019年3月17日</p>
                    </div>
                    <div class="order-pice">2078元</div>
                    <div class="order-assess">待评价</div>
                </li>
                <li class="order-list">
                    <div class="order-list-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="order-name">
                        <p class="order-name-title more-row">家电安装、空调安装、抽油烟机安装套餐服务</p>
                        <p class="order-date">2019年3月17日</p>
                    </div>
                    <div class="order-pice">2078元</div>
                    <div class="order-assess">待评价</div>
                </li>
            </ul>

        </div>
    </div>

    <!-- 服务商 -->
    <div class="facilitator">
        <div class="sub-title">
            <h3>服务商</h3>
        </div>
        <div class="facilitator-container">
            <span>您尚未验证</span>
            <a href="">我要验证</a>
        </div>
    </div>
    <!-- 常用工具 -->
    <div class="tools">
        <div class="sub-title">
            <h3>常用工具</h3>
        </div>
        <div class="tools-container">
            <a href=""><img src="./images/dispatching.png" alt=""></a>
            <a href=""><img src="./images/dispatching.png" alt=""></a>
            <a href=""><img src="./images/dispatching.png" alt=""></a>

            <a href=""><img src="./images/dispatching.png" alt=""></a>
            <a href=""><img src="./images/dispatching.png" alt=""></a>
            <a href=""><img src="./images/dispatching.png" alt=""></a>
        </div>
    </div>



    <!-- 版权信息 -->
    <div class="footer">
        <div class="footer-container">
            <p>家政网，你的专业私人管家助手</p>
            <p>家政热线：<span>400-200-300</span>&nbsp;&nbsp;&nbsp;<span>031-516-511</span></p>
            <p class="footer-contact">
                <a href="">成为合伙人</a> |
                <a href="">关于我们</a> |
                <a href="">意见反馈</a> |   
                <a href="">在线招聘</a>
            </p>
        </div>
    </div>

    <!-- 悬浮导航 -->
    <div class="suspend-footer">
        <ul class="suspend-container">
            <li class="suspend-list">
                <a href="">
                    <div><span class="home-icon suspend-icons"></span></div>
                    <div class="home-title">首页</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="publish-icon suspend-icons"></span></div>
                    <div class="home-title">发布</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="information-icon suspend-icons"></span></div>
                    <div class="home-title">消息</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="user-icon suspend-icons"></span></div>
                    <div class="home-title">我的</div>
                </a>
            </li>
        </ul>
    </div>
    <script src="./js/user.js"></script>
</body>
</html>